<template>
  <div class='table'>
    <ui-container style="width:100%;">
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" style="padding-top:30px;">
        <el-form-item label="店铺名称" prop="UserName" required>
          <el-input v-model.trim="ruleForm.UserName" style="width:400px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="Phone" required>
          <el-input v-model.trim="ruleForm.Phone" style="width:400px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="店铺类型" prop="ShopType" required>
          <el-select v-model="ruleForm.ShopType" style="width:400px" size="small" placeholder="请选择店铺类型">
            <el-option v-for="(item,index) in TypeList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺楼层" prop="Floor" required>
          <el-select v-model="ruleForm.Floor" style="width:400px" size="small" placeholder="请选择店铺楼层">
            <el-option label="1F" value="1"></el-option>
            <el-option label="2F" value="2"></el-option>
            <el-option label="3F" value="3"></el-option>
            <el-option label="4F" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺门牌" prop="Address"  required>
          <el-input v-model="ruleForm.Address" style="width:400px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="店家Logo" prop="HeadUrl" required>
          <el-upload
            name="HeadUrl"
            class="avatar-uploader"
            action="/api/common/uploadImages"
            :headers="{authorization:token}"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.HeadUrl" :src="ruleForm.HeadUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺简介" prop="ShopDetail">
          <el-input type="textarea" v-model="ruleForm.ShopDetail" rows="5"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center;padding-bottom:30px;">
        <el-button type="primary" @click="submitForm('ruleForm')" size="small">保 存</el-button>
      </div>
    </ui-container>
  </div>
</template>
<script type='text/javascript'>
import {cookieStorage} from 'src/common/storage'
export default {
  name: 'shopCouponList',
  data () {
     let validatePhone = (rule, value, callback) => {
        if(value === ''){
          callback(new Error('请输入手机号'));
        }else{
          let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
          if (!myreg.test(value)) {  
              callback(new Error('请输入有效的手机号'));
          }else{
            callback();
          }
        }
      };
    return {
      token:cookieStorage.get('authorization'),
      TypeList:[],
      imageUrl: '',
      ruleForm: {
          UserName: '',
          Phone:'',
          Floor:'',
          ShopType: '',
          Address: '',
          HeadUrl:'',
          ShopDetail: ''
        },
        rules: {
          UserName: [
            { required: true, message: '请输入店铺名称', trigger: 'blur' }
          ],
          Phone: [
            //{ required: true, message: '请输入手机号', trigger: 'blur' }
            { validator: validatePhone, trigger: 'blur' }
          ],
          ShopType: [
            { required: true, message: '请选择店铺类型', trigger: 'change' }
          ],
          Floor: [
            { required: true, message: '请选择店铺楼层', trigger: 'change' },
          ],
          Address: [
            { required: true, message: '请输入店铺门牌', trigger: 'blur' }
          ],
          ShopDetail: [
            { required: true, message: '请输入店铺简介', trigger: 'blur' }
          ]
        },
    }
  },
  mounted () {
    this.getAllShopTypes();
    this.init();
  },
  methods: {
    init(){
      this.$api.shop.getCompanyUserInfo().then((rs) => {
        console.log(rs)
        if(rs.IsSuccess){
          this.ruleForm.UserName = rs.Data.UserName;
          this.ruleForm.ShopType = rs.Data.ShopType;
          this.ruleForm.Phone = rs.Data.Phone;
          this.ruleForm.HeadUrl = rs.Data.HeadUrl;
          this.ruleForm.Floor = rs.Data.Floor.toString();
          this.ruleForm.Address = rs.Data.Address;
          this.ruleForm.ShopDetail = rs.Data.ShopDetail;
        }
      }).catch((res) =>{})
    },
    getAllShopTypes(){
      this.$api.shop.getAllShopTypes().then((rs) => {
        console.log(rs)
        if(rs.IsSuccess){
          this.TypeList = rs.Data;
        }
      }).catch((res) =>{})
    },
    handleAvatarSuccess(res, file) {
      this.ruleForm.HeadUrl = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
     submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.shop.updateShopInfo(this.ruleForm).then((rs) => {
            if(rs.IsSuccess){
              this.$message({
                type: 'success',
                message: '提交成功!'
              });
            }
          }).catch((res) =>{

          })
        } else {
          //this.$message.error('提交失败！');
        }
      });
    },
  }
}
</script>
<style lang='scss' type='text/scss' rel='stylesheet/scss'>
.container-main{
  width: 100% !important;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
